<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>人员管理系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="format-detection" content="telephone=no">
		<link rel="shortcut icon" href="images/title.jpg">
		<link rel="stylesheet" href="layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css">
		<link rel="stylesheet" href="datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css">
		<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/main.css" />
		<style>
			.layui-table {
				text-align: center;
			}
			
			ul.layui-nav:nth-child(1) {
				margin-left: 0px;
			}
			
			#layer1 {
				background-color: #009688;
			}
			#groupTable thead th{
			    border-bottom: 0px white;
			}
		</style>

	</head>

	<body>
		<div class="layui-layout layui-layout-admin" >
			<!--头部导航-->
			<div class="layui-header header header-demo"></div>
			<!--左侧导航-->
			<div class="layui-side layui-bg-black" id="admin-side"></div>
			<!--右侧具体内容-->

			<div class="layui-body" style="bottom: 0;padding:20px" id="admin-body">
				<div>
				<div class="title" style="float:left">人员列表：</div>
				<div id="groups" class="title" ></div>
				<div id="groupnames" class="title" ></div>
					<div style="float:right">
						
						<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal padd" id="layer2" style="float: left; background-color:#009688 ;">添加人员</button>
						<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal back" id="layer1" style="float: right;background-color:#0081c2 ;">返回</button>
					</div>
				</div>
				<hr/ style="border-color: #858585;">
				<div style="padding: 20px; background-color: #F2F2F2;">
  					<div class="layui-row layui-col-space15">
						<div class="layui-col-md12">
      						<div class="layui-card">
        						<div class="layui-card-body">
                   					<table class="mainTable display" cellspacing="0" width="100%" id="mainTable"></table>
        						</div>
      						</div>
    					</div>
  					</div>
    			</div>
			</div>
		</div>
		<!--JS模块-->

		<script type="text/javascript" src="layui/layui.js"></script>
		<script src="js/jquery-1.12.3.min.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/dateRange.js"></script>
		<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script>
			
			var ip="http://qure.zjgsu.edu.cn";
			var url=decodeURI(window.location.search);
			var C1=url.split("?")[1];//Id=5baef8585f44b96494ebf620&name=宣传部&group=中层领导
			var C2=C1.split("&")[0];//Id=5baef8585f44b96494ebf620
			var ID=C2.split("=")[1];//调查小组的id
			var T1=C1.split("&")[2];//group=中层领导
			var ggroup=T1.split("=")[1];//评委构成的名字
			var N1=C1.split("&")[1];
			var N2=N1.split("=")[1];//调查小组的名字
			//构建列表表头
			function buildTable() {
				var columns =[{"title":""},{"title":"工号/学号"},{"title":"姓名"},{"title":"学院"},{"title":"手机"},{"title":""}];
				$('.mainTable').DataTable({
					responsive: true,
					searching: true,
			        "columns":columns,
			        "bLengthChange": true,
			        info:false,
			        "bRetrieve": true,
			        "bFilter": true, //过滤功能
					"columnDefs": [ 
						{ "orderable": false, "targets": 0 },
						{ "orderable": false, "targets": 5 }
					],
					language: {
       					"sProcessing": "处理中...",
       					"sLengthMenu": "显示 _MENU_ 项结果",
       					"sZeroRecords": "没有匹配结果",
       					"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
       					"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
       					"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
       					"sInfoPostFix": "",
       					"sSearch": "搜索:",
       					"sUrl": "",
       					"sEmptyTable": "表中数据为空",
      					"sLoadingRecords": "载入中...",
       					"sInfoThousands": ",",
				       "oPaginate": {
				           "sFirst": "首页",
				           "sPrevious": "上页",
				           "sNext": "下页",
				           "sLast": "末页"
				       },
				       "oAria": {
				           "sSortAscending": ": 以升序排列此列",
				           "sSortDescending": ": 以降序排列此列"
				       }
  				 }


			   })
			}
			
			
			
			//列表填充数据
			function TableDataAjax(){
				$.ajax({
					type:"GET",
					url:ip+"/surveyGroup/getUsers?surveyGroupId="+ID+"&group="+ggroup,
					data:{},
					xhrFields: {
									withCredentials: true
									},
									crossDomain: true,
					async:true,
					dataType:"json",
					contentType:" application/json",
					xhrFields:{withCredentials:true},
					crossDomain:true,
					success:function(obj){
						console.log(obj);
						expressdata(obj);
						content=obj.data;
				    },
					Error:function(){
						alert("服务器出错");
					}
					
				})
			}
  			
  			//给列表填充数据的具体方法
  			function expressdata(obj){
	       		$.each(obj.data, function(index, item) {
		            $('.mainTable').dataTable().fnAddData([
						'<input type="checkbox" name="addcheck" >',
						item.username,
						item.name,
						item.collegeName,
						item.longPhone,
						'<div class="layui-btn layui-btn-danger  layui-btn-small delete" id="' + item.id+ '" >删除</div>'
					]);
				});
			}
  			
  			

  			//返回按钮
  			 $(document).on('click', '.back', function() {
  			 	window.location.href = "eachteam.html?Id=" +ID+"&name="+N2;
  			 })
  			//添加按钮
  			 $(document).on('click', '.padd', function() {
  			 	window.location.href = "shaixuan.html?Id=" +ID+"&name="+N2+"&group="+ggroup;
  			 })
  			//删除按钮
		 	$(document).on('click', '.delete', function() {
			 	k = $(this).parents("tr").index() + 1;
			 	var peopleDeleteList=new Array();
			 	peopleDeleteList[0]=this.id;
			 	layui.use('layer', function() {
		 			var layer = layui.layer;
		 			layer.confirm('是否要删除该人员', {
			 			btn: ['确定', '取消'],
			 			icon: 3,
			 			title: '提示',
			 			btn1:function(index, layero){
			 				$.ajax({
				 				type: "DELETE",
				 				url: ip + "/surveyGroup/deleteUser",
				 				data: JSON.stringify({
				 							"surveyGroupId":ID,
		  									"group":ggroup,
		  									"userIds":peopleDeleteList
		  								}),
		  								xhrFields: {
									withCredentials: true
									},
									crossDomain: true,
				 				async: true,
				 				dataType: "json",
				 				contentType: "application/json",
				 				success: function(data) {
				 					if(data.code==0){
				 					$("table#mainTable").find("tr:eq(" + k + ")").remove();
				 					}
				 					if(data.code==-1){
				 					layer.msg(data.msg);
				 					}
									layer.close(index);
									
				 				},
				 				Error: function() {
				 					alert("服务器出错");
				 				}
			 				})
			 			}
		 			})
		    	});
		    })
	
  			function isLogin(){
				$.ajax({
					 				type: "get",
					 				url:ip+"/user/type ",
					 				data: {},
					 				async: true,
					 				dataType: "",
					 				contentType: "application/json",
					 				xhrFields: {
									withCredentials: true
									},
									crossDomain: true,
					 				success: function(res) {
					 					if(res.code==-1){
					 						layui.use('layer', function(){
			  									var layer = layui.layer;
			  									layer.msg(res.msg);
											});     
					 						
					 						window.location.href="login.html";
					 						console.log(res.msg);
					 					}
									
					 				},
					 				Error: function() {
					 					alert("服务器出错");
					 				}
					 			})
}
  			
			
			$(function() {
				isLogin();
				$("#groupnames").html(ggroup);
				$("#groups").html(N2+">>");
				TableDataAjax();
				buildTable();
			})
			
			
			
			
		</script>
	</body>

</html>